import styles from './index.less';
import { useRef, useState } from 'react';
import { Player, Controls } from '@lottiefiles/react-lottie-player';
import { Flex, Button } from 'antd';
import likeButton from "@/assets/anims/likeButton.json";
import reactAnim from "@/assets/anims/react.json";
import vueAnim from "@/assets/anims/vue.json";
import pullAnim from "@/assets/anims/pull.json";

export default () => {

    const lottieRef = useRef<Player>(null);

    const [direction, setDirection] = useState<-1 | 1>(1);

    const [speed, setSpeed] = useState<number>(1);

    return (
        <div className={styles.container}>
            <a href="https://lottiefiles.com/" target='_blank'>官网：https://lottiefiles.com/</a>
            <br/>
            <a href="https://github.com/LottieFiles/lottie-react">仓库：https://github.com/LottieFiles/lottie-react</a>

            <h1>动画的展示与控制</h1>
            <Player
                ref={lottieRef}
                autoplay={false}
                loop
                src={pullAnim}
                style={{ height: '500px', width: '500px' }}
            >
            </Player>
            <Flex gap="small" wrap align="center">
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.play();
                }}>播放</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.pause();
                }}>暂停</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.stop();
                }}>停止</Button>
                <Button type="primary" size='small' onClick={() => {
                    const newSpeed = speed === 0 ? 0 : speed - 0.1;
                    lottieRef.current?.setPlayerSpeed(newSpeed);
                    setSpeed(newSpeed);
                }}>减速</Button>
                <span>速度:{speed.toFixed(1)}</span>
                <Button type="primary" size='small' onClick={() => {
                    const newSpeed = speed === 10 ? 10 : speed + 0.1;
                    lottieRef.current?.setPlayerSpeed(newSpeed);
                    setSpeed(newSpeed);
                }}>加速</Button>
                <Button type="primary" size='small' onClick={() => {
                    const newDirection = direction === 1 ? -1 : 1;
                    lottieRef.current?.setPlayerDirection(newDirection);
                    setDirection(newDirection);
                }}>方向({direction === 1 ? '正': '反'})</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.setSeeker(15, true);
                }}>跳播</Button>
                <Button type="primary" size='small' onClick={() => {
                    lottieRef.current?.setSeeker(15, false);
                }}>跳停</Button>
            </Flex>

            <h1>带播放条的Lottie播放</h1>
            <Player
                autoplay
                loop
                src={likeButton}
                style={{ height: '300px', width: '300px' }}
            >
                <Controls visible={true} buttons={['play', 'repeat', 'frame', 'debug']} />
            </Player>

            <h1>鼠标悬浮播放</h1>
            <Flex gap="small" wrap align="center" style={{ marginTop: 24, marginBottom: 24 }}>
                <Player
                    autoplay
                    loop
                    src={reactAnim}
                    style={{ height: '300px', width: '500px' }}
                    hover={true}
                >
                </Player>

                <Player
                    autoplay
                    loop
                    src={vueAnim}
                    style={{ height: '300px', width: '500px' }}
                    hover={true}
                >
                </Player>
            </Flex>
        </div>
    );
}